<template>
  <main class="wss-container">
    <!-- 合同文控 -->
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10" class="contractTmp-Box">
          <NewCard title="智慧文控" :isright="isright">
            <template v-if="isBuy">
              <template slot="right">
                <div class="topRight">
                  <el-input
                    v-model="topSearchValue"
                    placeholder="搜索文件"
                    class="topSearch"
                    @input="changeValue"
                    @focus="focusInput"
                    @blur="blurInput"
                    ref="topSearch"
                  >
                    <i slot="suffix">
                      <svg-icon icon-class="ss_icon" />
                    </i>
                  </el-input>
                </div>
              </template>
              <div class="tabOne">
                <div
                  class="tablist"
                  :class="status == 1 ? 'isActive' : ''"
                  @click="status = 1"
                  v-if="limitData.master || limitData.upload"
                >
                  <img src="~@/assets/images/sc_icon_nor.svg" class="imgnor" />
                  <img src="~@/assets/images/sc_icon_sel.svg" class="imgsel" />
                  <el-button round>上传</el-button>
                </div>
                <div
                  class="tablist"
                  :class="status == 2 ? 'isActive' : ''"
                  @click="status = 2"
                >
                  <img
                    src="~@/assets/images/hdda_icon_nor.svg"
                    class="imgnor"
                  />
                  <img
                    src="~@/assets/images/hdda_icon_sel.svg"
                    class="imgsel"
                  />
                  <el-button round>活动档案</el-button>
                </div>
                <div
                  class="tablist"
                  :class="status == 3 ? 'isActive' : ''"
                  @click="status = 3"
                >
                  <img
                    src="~@/assets/images/lsda_icon_nor.svg"
                    class="imgnor"
                  />
                  <img
                    src="~@/assets/images/lsda_icon_sel.svg"
                    class="imgsel"
                  />
                  <el-button round>历史档案</el-button>
                </div>
                <div
                  class="tablist"
                  :class="status == 4 ? 'isActive' : ''"
                  @click="status = 4"
                  v-if="limitData.master || limitData.manager"
                >
                  <img
                    src="~@/assets/images/lsda_icon_nor.svg"
                    class="imgnor"
                  />
                  <img src="~@/assets/images/sz_icon_sel.svg" class="imgsel" />
                  <el-button round>设置</el-button>
                </div>
              </div>

              <!-- 上传 -->
              <div class="uploadWith" v-if="status == 1">
                <!-- 图片上传  -->
                <div
                  class="class_item"
                  :class="demandShow == 11 ? 'class_item_ac' : ''"
                  @click="openPhoto(11)"
                >
                  <!-- 左右结构 -->
                  <div class="item_left">
                    <div class="pic">
                      <img
                        src="~@/assets/images/tpsc_icon.svg"
                        mode=""
                        class="upload_pic"
                      />
                    </div>
                    <div class="select">
                      <div class="select_title">图片上传</div>
                      <div class="select_tishi">上传本地相册生成PDF文档</div>
                    </div>
                  </div>
                  <div class="item_right">
                    <img
                      src="~@/assets/images/jr_icon.svg"
                      mode=""
                      class="upload_icon"
                    />
                  </div>
                </div>
                <!-- 文件上传 -->
                <div
                  class="class_item"
                  :class="demandShow == 12 ? 'class_item_ac' : ''"
                  @click="openFile(12)"
                >
                  <!-- 左右结构 -->
                  <div class="item_left">
                    <div class="pic">
                      <img
                        src="~@/assets/images/wjsc_icon.svg"
                        mode=""
                        class="upload_pic"
                      />
                    </div>
                    <div class="select">
                      <div class="select_title">文件上传</div>
                      <div class="select_tishi">上传本地文件生成文件</div>
                    </div>
                  </div>
                  <div class="item_right">
                    <img
                      src="~@/assets/images/jr_icon.svg"
                      mode=""
                      class="upload_icon"
                    />
                  </div>
                </div>
                <!-- 底部显示菜单 -->
                
              </div>
              <!-- 活动档案 -->
              <div class="activityRecord" v-else-if="status == 2">
                <!-- 一级类别 -->
                <activityRecord
                  :circle_id="circle_id"
                  @onClickList="onClickList($event)"
                ></activityRecord>
              </div>
              <!-- 历史档案 -->
              <div class="historyRecord" v-else-if="status == 3">
                <historyRecord
                  :circle_id="circle_id"
                  @onClickList="onClickList($event)"
                ></historyRecord>
              </div>
              <!-- 设置 -->
              <div class="setting" v-else-if="status == 4">
                <div
                  class="class_item"
                  :class="demandShow == 41 ? 'class_item_ac' : ''"
                  @click="openCyz(41)"
                  v-if="limitData.master"
                >
                  <!-- 左右结构 -->
                  <div class="item_left">
                    <div class="pic">
                      <img
                        src="~@/assets/images/cyz_icon_sel.svg"
                        mode=""
                        class="upload_pic"
                      />
                    </div>
                    <div class="select">
                      <div class="select_title">超级查阅者</div>
                      <div class="select_tishi">
                        超级查阅者可搜索及查阅该组织的所有文件
                      </div>
                    </div>
                  </div>
                  <div class="item_right">
                    <img
                      src="~@/assets/images/jr_icon.svg"
                      mode=""
                      class="upload_icon"
                    />
                  </div>
                </div>
                <div
                  class="class_item"
                  :class="upType == 42 ? 'class_item_ac' : ''"
                  @click="openManger(42)"
                  v-if="limitData.master"
                >
                  <!-- 左右结构 -->
                  <div class="item_left">
                    <div class="pic">
                      <img
                        src="~@/assets/images/gly_icon_sel.svg"
                        mode=""
                        class="upload_pic"
                      />
                    </div>
                    <div class="select">
                      <div class="select_title">上传管理员</div>
                      <div class="select_tishi">上传管理员可添加上传成员</div>
                    </div>
                  </div>
                  <div class="item_right">
                    <img
                      src="~@/assets/images/jr_icon.svg"
                      mode=""
                      class="upload_icon"
                    />
                  </div>
                </div>
                <div
                  class="class_item"
                  :class="upType == 43 ? 'class_item_ac' : ''"
                  @click="openManger(43)"
                  v-if="limitData.master || limitData.manager"
                >
                  <!-- 左右结构 -->
                  <div class="item_left">
                    <div class="pic">
                      <img
                        src="~@/assets/images/sccy_icon_sel.svg"
                        mode=""
                        class="upload_pic"
                      />
                    </div>
                    <div class="select">
                      <div class="select_title">上传成员</div>
                      <div class="select_tishi">
                        上传成员可上传文件，内享文件
                      </div>
                    </div>
                  </div>
                  <div class="item_right">
                    <img
                      src="~@/assets/images/jr_icon.svg"
                      mode=""
                      class="upload_icon"
                    />
                  </div>
                </div>
              </div>
            </template>

            <!-- 付费或者试用页面 -->
            <Default v-else @goPayOrTrial="goPayOrTrial" :type="1"></Default>
          </NewCard>
        </el-col>

        <el-col :span="14">
          <div class="featuredContent" v-if="demandShow == 0">
            <!-- 推荐内容 -->
            <FeaturedContent></FeaturedContent>
          </div>
          <!-- 图片模块 -->
          <div class="featuredContent" v-else-if="demandShow == 11">
            <upImg
              :demandShow="demandShow"
              :circle_id="circle_id"
              @openPay="openPay"
              @changeStatus="changeStatus"
            ></upImg>
          </div>
          <!-- 收银台 -->
          <div class="featuredContent" v-else-if="demandShow == 112">
            <payLoad :isTrial="isTrial" @paySuccess="paySuccess" :circleInfo="circleInfo"></payLoad>
          </div>
          <!-- 设置管理上传模块 -->
          <div
            class="featuredContent"
            v-else-if="demandShow == 41 || demandShow == 42 || demandShow == 43"
          >
            <uploadCeter
              @payLoad="payLoad"
              :circle_id="circle_id"
              :circleInfo="circleInfo"
              :upType="upType"
            ></uploadCeter>
          </div>
          <!-- 文档模块 -->
          <div class="featuredContent" v-else-if="demandShow == 50">
            <downLoad
              :circle_id="circle_id"
              :activeFileInfo="activeFileInfo"
              :status="status"
            ></downLoad>
          </div>
          <!--文件上传  -->
          <div class="featuredContent" v-else-if="demandShow == 12">
            <upFile
              :circle_id="circle_id"
              @changeStatus="changeStatus"
            ></upFile>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import { getFileListApi } from "@/BMViews/api/tool/fileManage";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import uploadCeter from "./uploadCenter/index.vue";
import downLoad from "./downLoad/index.vue";
import Default from "@/BMViews/views/tool/budget/components/default.vue";
import upImg from "./upImg/index.vue";
import payLoad from "./payLoad/index.vue";
import upFile from "./upFile/index.vue";
import {
  getFileboxListApi,
  getFileboxRoleList,
} from "@/BMViews/api/intelligentControl/intelligentControl.js";
import activityRecord from "./activityRecord/index.vue"; //档案文档
import historyRecord from "./historyRecord/index.vue"; //档案文档
export default {
  name: "IntelligentControl",
  data() {
    return {
      isright: true, //显示搜索框
      isBuy: false, //是否购买了智慧文控
      isTrial: false, //判断试用或购买
      status: 0, //1上传  2活动档案 3历史档案
      flagMore: true, //更多
      topSearchValue: "",

      firstId: "",
      currentIndex: "", //默认选择第一项
      list: [], //所有类别的数据
      firstList: [], //一级类别的列表
      fistindex: 0, //一级类别的当前索引
      firstId: "", //当前选中的一级Id
      firstName: "", //当前选中的一级名称

      pageing: { pageNum: 1, pageSize: 100 },
      allActiveList: [], //所有活动数据
      allHistoryList: [], //所有历史数据
      activeContractList: [], //合同活动类别
      historyContractList: [], //合同历史类别
      activeContractClass: {}, //当前的分类
      activeList: [], //活动档案
      historyContractClass: {}, //当前的分类
      historyList: [], //历史档案
      // 默认头像src\assets\images\defaultAvatar.jpg
      DeAvatar: require("@/assets/images/defaultAvatar.jpg"),

      demandShow: 0, //是否显示推荐内容
      upType: 9, //显示上传部分的高亮和传入组件type
      circle_id: "", //文控id
      circleInfo: {}, //文控信息
      //W 20221022当前文件信息
      activeFileInfo: {},
      limitData: {
        //权限判断
        upload: false,
        manager: false,
        master: false,
      },
    };
  },
  components: {
    NewCard,
    SubBtn,
    FeaturedContent,
    uploadCeter,
    downLoad,
    upImg,
    payLoad,
    upFile,
    activityRecord,
    historyRecord,
    Default,
  },
  async created() {
    // await this.getFileboxListApi(); //根据问圈获取文控id
  },
  async mounted() {
   
  },
  watch: {
    "$store.state.user.userInfo.whereCircleId": {
      handler(newValue) {
        this.status = 0
        this.getFileboxListApi(); // 判断当前用户的是否购买指挥文控
      },
      immediate: true,
    },
  },
  methods: {
    // ---------------------未购买
    // 打开收银台
    goPayOrTrial(isGoPay, isTrial) {
      this.isTrial = isTrial;
      this.demandShow = 112;
    },
    // -------------------------已购买
    // 上传成功回调
    changeStatus(data) {
      this.status = data;
      this.demandShow = 50;
    },
    //输入框改变的时候过滤
    changeValue(value) {
      // if (value) {
      //   this.selectContractBySearchApi(value);
      // }
      //过滤数据 this.topSearchValue
      // this.allList = this.filterList.filter((item) =>
      //   item.name.includes(this.topSearchValue)
      // );
    },
    //搜索框激活状态
    focusInput() {
      //显示搜索发现
      //获取所有的合同名称
    },
    //搜索框失去焦点
    blurInput() {
      //隐藏搜索发现
    },

    // 图片上传
    openPhoto(e) {
      this.demandShow = e;
    },
    // 打开待支付页面
    openPay(e) {
      this.demandShow = e;
    },
    // 文件上传
    openFile(e) {
      this.demandShow = e;
    },

    //  <-------------------------------档案--------------------------------------->
    // 活动档案
    //点击一级类别
    clickFirst(f1, index) {
      this.fistindex = index;
      this.firstId = f1.id;
      this.firstName = f1.name;
    },
    // 获取文控问圈id
    async getFileboxListApi() {
      let circle_id = this.$store.state.user.userInfo.whereCircleId;
    
      const res = await getFileboxListApi({ circle_id });
      if (res.code == 200) {
       
        this.isBuy = false;
        this.demandShow = 0;
        if (res.rows.length <= 0 || res.rows.fileNum <= 0) {
          return;
        }
        this.isBuy = true;
        console.log('购买了');
        let accountList = res.rows[0];
        this.circleInfo = accountList;
        this.circle_id = accountList.id;
        await this.getFileboxRoleList(this.circle_id);
      }
    },
    async getFileboxRoleList(e) {
      const res = await getFileboxRoleList({
        filebox_id: e,
      });
   
       Object.keys(this.limitData).forEach((item) => {
          this.limitData[item] = false;
        });
      if (res.rows.length <= 0) {
        return;
      }
      
      if (res.rows[0].master == 1) {
        this.limitData.master = true;
        this.status = 1;
      } else {
        if (res.rows[0].uploader == 1 && res.rows[0].uploaderEnable == 1) {
         
          this.limitData.upload = true;
          this.status = 1;
        } else {
          
          this.status = 2;
        }
        if (res.rows[0].uploadManager == 1) {
          this.limitData.manager = true;
        }
      }
    },
    //获取对应的活动文档列表
    async getActiveListApiFn() {
      // const { pageNum, pageSize } = this.pageing;
      let result = await getFileListApi({
        status: 1,
        fileboxId: this.circle_id,
      });
      if (result.code == 200) {
        this.allActiveList = result.rows;
        // 过滤一级类别名称
        var map = {};
        let mapDetailArr = [];
        let newContractList = [];
        this.allActiveList.forEach((item) => {
          newContractList.push(item);
        });
        // this.NavList[1].num = this.allActiveList.length

        let jcontractList = JSON.parse(JSON.stringify(newContractList));

        for (var i = 0; i < jcontractList.length; i++) {
          var ai = jcontractList[i];
          if (!map[ai.contractTypeName]) {
            this.activeContractList = [
              ...this.activeContractList,
              {
                contractTypeName: ai.contractTypeName,
                id: ai.contractType,
                contractTypeIcon: ai.contractTypeIcon,
                data: [ai],
              },
            ];
            map[ai.contractTypeName] = ai;
          } else {
            for (var j = 0; j < this.activeContractList.length; j++) {
              var dj = this.activeContractList[j];
              if (dj.contractTypeName == ai.contractTypeName) {
                dj.data.push(ai);
                break;
              }
            }
          }
        }
        this.activeContractClass = this.activeContractList[0];
        this.activeList = this.activeContractList[0].data;
        this.currentIndex = this.activeList[0].id;
      }
    },

    // 获取对应的历史文档列表
    async getHistoryApiFn() {
      let result = await getFileListApi({
        status: 0,
      });
      if (result.code == 200) {
        this.allHistoryList = result.rows;
        // 过滤一级类别名称
        var map = {};
        let mapDetailArr = [];
        let newContractList = [];
        this.allHistoryList.forEach((item) => {
          newContractList.push(item);
        });
        // this.NavList[2].num = this.allHistoryList.length

        let jcontractList = JSON.parse(JSON.stringify(newContractList));
        for (var i = 0; i < jcontractList.length; i++) {
          var ai = jcontractList[i];
          if (!map[ai.contractTypeName]) {
            this.historyContractList = [
              ...this.historyContractList,
              {
                contractTypeName: ai.contractTypeName,
                id: ai.contractType,
                contractTypeIcon: ai.contractTypeIcon,
                data: [ai],
              },
            ];
            map[ai.contractTypeName] = ai;
          } else {
            for (var j = 0; j < this.historyContractList.length; j++) {
              var dj = this.historyContractList[j];
              if (dj.contractTypeName == ai.contractTypeName) {
                dj.data.push(ai);
                break;
              }
            }
          }
        }
        this.historyContractClass = this.historyContractList[0];
        this.historyList = this.historyContractList[0].data;
        this.currentIndex = this.historyList[0].id;
      }
    },
    // <-------------------------------档案end--------------------------------------->

    // <------------------------------- 设置--------------------------------------->
    // 超级查阅者
    openCyz(e) {
      this.demandShow = e;
      this.upType = e;
    },
    // 上传管理员
    openManger(e) {
      this.demandShow = e;
      this.upType = e;
    },
    // 购买份数回调
    payLoad() {
      this.demandShow = 112;
    },
    // 支付成功
    paySuccess() {
      this.demandShow = 0;
      this.isBuy = true;
       this.status = 0
        this.getFileboxListApi(); // 判断当前用户的是否购买指挥文控
    },
    // 上传成员
    // openMenage() {
    //    if(this.demandShow == 0){
    //       this.demandShow = 1
    //   }
    //   this.upType = 0
    // },

    // <------------------------------- 设置end ---------------------------------->

    labelMore() {
      // const _this = this;
      // const list = _this.activeContractList;
      // let activeContractList = _this.activeContractList;
      // // 是否是收起
      // if (!_this.flagMore) {
      //   _this.activeContractList = list.slice(0, 10);
      //   _this.flagMore = !_this.flagMore;
      //   return;
      // }
      // // 当前长度
      // let length = activeContractList.length;
      // // 最大的长度
      // let maxlength = list.length;
      // // list够6就加6
      // if (length + 5 < maxlength) {
      //   _this.activeContractList = [
      //     ...activeContractList,
      //     ...list.slice(length, length + 5),
      //   ];
      //   // 不够到底，全部给，并且把更多改成收起
      // } else {
      //   _this.flagMore = !_this.flagMore;
      //   _this.activeContractList = list;
      // }
    },
    // 计算天数
    getDate(endDateStr) {
      var beginDate = this.getCurrentTime().slice(0, 10);
      let startTime = new Date(
        Date.parse(beginDate.replace(/-/g, "/"))
      ).getTime();
      var endDate = endDateStr.slice(0, 10);
      let endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
      var hours = Math.abs(endTime - startTime) / (1000 * 60 * 60 * 24);
      return hours;
    },
    //获取当前时间并打印
    getCurrentTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let gettime = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf + ":" + ss;
      return gettime;
    },
    //拼接日期
    joinTime(time) {
      let newTime = time.replace(/-/g, "");
      return newTime.slice(2);
    },
    // 判断字母类型
    isFont(proper, name) {
      if (proper == 3) {
        return "模";
      } else {
        if (name) {
          let arr = name.split("");
          let reg =
            /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/;
          let str = "";
          for (let i = 0; i < arr.length; i++) {
            if (!reg.test(arr[i])) {
              return arr[i];
            }
          }
        }
      }
    },
    //W 2022-10-22 点击文件列表回调
    onClickList(data) {
      this.demandShow = 50;
      this.activeFileInfo = data;
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .label-box-content .el-card__body .top {
  margin: 0 30px;
}
::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 一级类别 */
.tabTitle {
  font-size: 12px;
  color: #999;
  margin: 20px 0;
}
.tabTwo ul {
  display: flex;
  flex-wrap: wrap;
  /* margin: 0 15px; */
}
.tabTwo ul > li {
  width: 20%;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  /* border: 1px solid #f87a23; */
}
.tabTwo ul > li > p {
  margin: 10px 0;
}
.tabTwo ul > li > img {
  display: block;
  width: 25px;
  margin: 0 auto;
}
.tabTwo ul > li.isSecon {
  color: #f87a23;
  font-weight: bold;
  border-bottom-color: #f87a23;
}
.tabTwo ul > li:hover {
  /* color: #f87a23; */
  font-weight: bold;
}
.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}
/* 图片上传 */
.uploadWith {
  padding: 0 30px;
}
.class_item {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  border-radius: 18px;
  margin-bottom: 30px;
}
.item_left {
  display: flex;
}
.pic {
  margin-right: 10px;
}
.pic .upload_pic {
  width: 44px;
  height: 44px;
  vertical-align: middle;
}
.select {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.select .select_title {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #232323;
}
.select .select_tishi {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
.item_right .upload_icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
/* 图片上传结束 */

/* 活动档案 */
.activityRecord {
  padding: 0 30px;
}

/* 历史档案 */
.historyRecord {
  padding: 0 30px;
}
/* 设置 */
.setting {
  padding: 0 30px;
}
/* 空盒子 */
.empty_box {
  font-size: 18px;
  text-align: center;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%); */
}
/* 顶部右边搜索 */
.topRight {
  position: relative;
}
.topSearch {
  width: 220px;
}
::v-deep .topSearch .el-input__suffix {
  right: 15px;
}
.topSearch i {
  display: inline-block;
  font-size: 16px;
  margin-top: 7px;
}
::v-deep .topSearch .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
}
::v-deep .topSearch .el-input__inner:focus {
  border: 2px solid #f87a23;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid #efefef;
}
.topSearchFind {
  position: absolute;
  width: 100%;
  border: 2px solid #f87a23;
  border-top: 0;
  background-color: #fff;
  border-radius: 0 0 18px 18px;
  padding: 10px 0;
  z-index: 999;
  overflow: hidden;
}
.topSearchFind ul {
  max-height: 200px;
  overflow-y: auto;
}
.topSearchFind ul > li {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 14px;
  line-height: 34px;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s;
}
.topSearchFind ul > li:hover {
  background-color: #f4f5f8;
  color: #f87a23;
}
.topSearchFind ul > li > span {
  font-size: 12px;
  color: #999;
}
/* 顶部右边搜索 end*/
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-bottom: 20px;
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 30px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

.secondLevel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.secondLevel ul > li {
  position: relative;
  /* left: 0;
  top: 0; */
  padding: 5px 10px 18px 70px;
  border-bottom: 1px solid #efefef;
}
.secondLevel ul > li:hover {
  background-color: #f4f5f8;
}
.secondLevel ul > li > i {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
}
.secondLevel ul > li:nth-child(even) > i {
  background-color: #b1bedf;
}
.secondLevel ul > li > h2 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 10px;
}
.secondLevel ul > li .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.secondLevel ul > li .coll_source {
  margin: 0;
  margin-top: 6px;
  margin-bottom: 12px;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
}
/* 三级类别的高亮 */
.tagActive {
  background-color: #f4f5f8;
}
/* 四级类别的高亮 */
.class_item_ac {
  background-color: #ecedf0;
}
.class_item_ac .select_title {
  color: #f87a23;
}
</style>
